<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let i = 1;
            $("#more").click(function () {
                // 克隆一个新的div区域
                let d = $("#d").clone(true);
                // 克隆出来的div的id属性值不能重复
                d.attr("id", "d" + i);
                $(this).before(d);

                // 此时克隆的div区域中文件选择器内容与原始div一致
                // 需要将克隆出来的div中的文件选择器内容清除
                // $("#d1 input").val("");
                $("#d" + i + " input").val("");
                i++;
            });
            $("a").click(function () {
                // if($(this.parentNode).attr("id") != "d"){
                //     $(this.parentNode).remove();
                // }
                if ($(this).parent().attr("id") != "d") {
                    $(this).parent().remove();
                }
            });
            $("#show").click(function () {
                // 取值时只会取出匹配到的所有元素中的第一个元素的值
                // console.log($("input[type='file']").val());
                // 如果想要获取所有元素的值,则需要遍历
                // 在jquery中,提供了遍历的方法each
                // each方法参数是一个function函数
                // 该函数可以是无参函数
                $("input[type='file']").each(function(){
                    // 可以通过this表示遍历的当前元素
                    console.log($(this).val());
                });

                // 也可以有一个参数,该参数表示当前遍历的元素的索引号
                $("input[type='file']").each(function(index){
                    // 可以通过this表示遍历的当前元素
                    // 仍然可以通过this表示遍历的当前元素
                    console.log("索引号:"+index+",文件名:"+$(this).val());
                });

                // 还能有两个参数
                // 参数一:索引号
                // 参数二:表示当前遍历的元素,相当于上面的this,是一个DOM对象
                $("input[type='file']").each(function(index,e){
                    // 可以通过this表示遍历的当前元素
                    // 仍然可以通过this表示遍历的当前元素
                    console.log("索引号:"+index+",文件名:"+$(e).val());
                });
            });
        });
    </script>
</head>
<body>
<!--
    1.当点击上传更多的时候,页面中新增一个与原始div基本一致的区域,id不能重复
        区域中包含了文件选择器与删除链接
        如果选择了文件内容之后点击上传更多
        此时原来已经选择的内容依然存在,新增的区域中文件选择器内容为空
    2.删除时可以删除新增出来的内容,原始内容不能被删除
-->
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="show">显示文件名</button>
</body>
</html>